<template>
  <div class="pageContent">
    <div class="centerAll">
      <div class="topButton">
        <el-button type="danger" @click="buttonClick('refund')">退款</el-button>
        <el-button type="danger" @click="buttonClick('refundRecord')">退款记录</el-button>
        <el-button type="primary" @click="buttonClick('appeal')">客诉/备注</el-button>
        <el-button type="primary" @click="buttonClick('collection')">关联收款单</el-button>
        <el-button type="primary" @click="buttonClick('glRefund')">关联退款单</el-button>
        <el-button type="primary" @click="buttonClick('consultation')">问诊资料/病例</el-button>
        <router-link to="/order_manage/refund">
          <el-button type="primary">申请退款</el-button>
          <!-- @click="buttonClick('application')" -->
        </router-link>
        <el-button type="primary" @click="buttonClick('chat')">聊天记录</el-button>
        <el-button type="primary" @click="buttonClick('void')">作废</el-button>
        <el-button type="primary" @click="buttonClick('order')">订单派单记录</el-button>
      </div>

      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <OrderInfomation v-if="prescriptionOrderId"   :prescriptionOrderId="prescriptionOrderId"></OrderInfomation>
      </el-card>

      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>患者信息</span>
          </div>
        </template>
        <PatientInfomation v-if="prescriptionOrderId"  :prescriptionOrderId="prescriptionOrderId"></PatientInfomation>
      </el-card>

      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>医生/团队</span>
          </div>
        </template>
        <DoctorTeam  v-if="prescriptionOrderId"  :prescriptionOrderId="prescriptionOrderId"></DoctorTeam>
      </el-card>

      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>订单详情</span>
          </div>
        </template>
        <OrderDetail  v-if="prescriptionOrderId"  :prescriptionOrderId="prescriptionOrderId"></OrderDetail>
      </el-card>

    </div>
  </div>

  <Dialog  ref="dialogRef"></Dialog>

</template>

<script setup>
  import {ref,nextTick,onMounted,reactive} from 'vue'
  import Dialog from '../recipeOrder/components/elDialog.vue'
  import Table from '/src/components/Table/index.vue'
  import OrderInfomation from '../recipeOrder/components/orderInformation.vue' //订单信息
  import PatientInfomation from '../recipeOrder/components/patientInformation.vue' //患者信息
  import DoctorTeam from '../recipeOrder/components/doctorTeam.vue' //医生/团队
  import OrderDetail from '../recipeOrder/components/orderDetails.vue' //订单详情
  import PrescriptionDetails from '../recipeOrder/components/prescriptionDetails.vue'
  import Logistics from '../recipeOrder/components/logistics.vue'
  import ProcessingFee from '../recipeOrder/components/processingFee.vue'
  import {useRoute,useRouter} from "vue-router";
  import {ElMessage,ElMessageBox} from 'element-plus'
  const router = useRouter()
  const route = useRoute()
  const dialogRef = ref(null);
  const prescriptionOrderId=ref('')
  const getPrescriptionOrderId=()=>{
    if(route.query.prescription_order_id){
      prescriptionOrderId.value=route.query.prescription_order_id
      console.log(prescriptionOrderId.value)
    }
  }
  onMounted(() => {
    getPrescriptionOrderId()
  });

  const buttonClick = (type) => {
    if (dialogRef.value) {
      dialogRef.value.buttonAll(type);
    }
  };
</script>

<style lang="scss" scoped>
  .topButton ::v-deep .el-button {
    margin: 0;
    margin-bottom: 12px;
    margin-right: 8px;
  }

  ::v-deep .el-card__header {
    background: #fafafa;
    padding: 15px 15px;
  }

  ::v-deep .el-card {
    padding-bottom: 40px;
    margin-bottom: 20px;
  }



  .card-header {
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }
</style>
